<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style scoped>
        .login-form {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(50,50,50,.1);
            padding: 30px;
        }
        .form-header {
            text-align: center;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div class="login-form" style="max-width: 400px; margin: 0 auto;">
            <div class="form-header">
                <img src="./img/liu2.png" alt="logo" @click="startUser">
            </div>
            <el-form :model="form" ref="form" label-width="80px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login" style="width: auto;">登录</el-button>
                    <el-button type="success" @click="register" style="width: auto;">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>
</div>
</body>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {form: {username: '', password: '',token: ''}}
        }, methods: {
            startUser() {
                alert("跳转！");
                window.open("user.html", "_self");
            },
            login() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        var _this = this;
                        axios.post('/user/login', this.form).then(res => {
                            if (res.data != "error") {
                                _this.$message({
                                    showClose: true,
                                    message: '登录成功',
                                    type: 'success'
                                });
                                window.location.href = "Category.html";
                            } else {
                                _this.$message({
                                    showClose: true,
                                    message: '登录失败',
                                    type: 'error'
                                });
                            }
                            // 登录成功后的处理
                        }).catch(err => {
                            // 登录失败后的处理
                        })
                    } else {
                        // 表单验证失败
                    }
                })

            },
            register() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        var _this = this;
                        axios.post('/user/register', this.form).then(res => {
                            if (res.data != "error") {
                                _this.$message({
                                    showClose: true,
                                    message: '注册成功',
                                    type: 'success'
                                });

                            } else {
                                _this.$message({
                                    showClose: true,
                                    message: '注册失败',
                                    type: 'error'
                                });
                            }
                            // 登录成功后的处理
                        }).catch(err => {
                            // 登录失败后的处理
                        })
                    } else {
                        // 表单验证失败
                    }
                })
            }
        }
    });

</script>
</html>